import React from 'react';
import "@/style/checkerboard.css"
const coordinate = {
    goX:['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O'],
    goY:[15,14,13,12,11,10,9,8,7,6,5,4,3,2,1]
}
class Square extends React.Component {
    constructor(props) {
        super(props)
        this.state= {
            showbg: 'gb_square',
        }
        this.innerClick = this.innerClick.bind(this)
        this.changeBackGround= this.changeBackGround.bind(this)
    }
    componentDidMount(){
        if(this.props.value===1){
            this.setState({
                showbg: 'gb_square gb_black'
            })
        }else if(this.props.value===2){
            this.setState({
                showbg: 'gb_square gb_write'
            })
        }else {
            this.setState({
                showbg: 'gb_square'
            })
        }
    }
    componentDidUpdate(prevProps, prevState) {
        if(prevProps.isBlack!== this.props.isBlack) {
            if(this.props.currentPosition === this.props.postion) {
                this.changeBackGround() 
            }
        }
    }
    innerClick(e) {
        e.stopPropagation()
        if(this.props.over || this.props.value || !this.props.isBlack){
            return
        }
        this.props.onClick(this.props.id,this.props.postion,this.props.horizontal,this.props.vertical)
        // this.changeBackGround()
    }
    changeBackGround() {
        // 这里有大bug，导致黑白颜色颠倒，所以暂时只好把背景颠倒写
        if(this.props.isBlack) {
            this.setState({
                showbg: 'gb_square gb_write'
            })
        }else {
            this.setState({
                showbg: 'gb_square gb_black'
            })
        }
    }
    render() {
        return (
            <div
                className={this.state.showbg}
                onClick={this.innerClick}
            ></div>
        )
    }
}


class Checkerboard extends React.Component {
    constructor(props) {
        super(props)
        this.handleClick = this.handleClick.bind(this)
    }
    handleClick(value,pos,x,y){
        this.props.onClick(value,pos,x,y)
        console.log(value,"位置是"+pos,x,y);
    }
    render() {
        const redPointX = parseInt(this.props.currentPosition%15)*37+14.5
        const redPointY = parseInt(Math.floor(this.props.currentPosition/15))*37+20
        const showPoint = this.props.currentPosition === -1? 'none':'block'

        return (
            <div className="gb_checkerboard">
                {coordinate.goY.map((itemY, y) =>(
                    <div key={itemY}>
                        {coordinate.goX.map((itemX, i) =>
                            <Square
                                key={itemX+itemY}
                                id={itemX+itemY}
                                value={this.props.squares[y*15+i]}
                                postion={y*15+i}
                                horizontal={y}
                                vertical={i}
                                onClick={this.handleClick}
                                isBlack = {this.props.blackIsNext}
                                over = {this.props.over}
                                currentPosition = {this.props.currentPosition}
                            />
                        )}
                    </div>
                ))}
                <div className="redPoint" style={{left:redPointX, top:redPointY ,display: showPoint}}></div>
            </div>
        )
    }
}

export default Checkerboard